
<template>
  <ul>
    <groupLi v-for="(item,index) in data" :key="index">
      <div v-if="!item.children" @mouseover="mouseOver1()" @click.stop="moveCust(item)">
        <span>{{item.attributes.className}}</span>
      </div>
      <template v-else>
        <div @mouseover="mouseOver2()" @click.stop="moveCust(item)">
          <span>{{item.attributes.className}}</span>
          <i class="el-icon-caret-right" style="float:right;line-height:25px"></i>
          <group :data="item.children" v-if="toggleShow" :nowId="nowId"></group>
        </div>
      </template>
    </groupLi>
  </ul>
</template>

<script>
    import groupLi from './gropLi'
    import { moveGroup} from '@/api/customer'
    export default {
        name: "group",
        props:['data', 'nowId'],
        data() {
            return {
                toggleShow: false
            }
        },
        methods: {
            mouseOver2() { // 移动到进入
                this.toggleShow = true
            },
            mouseOver1() { // 移动到进入
                this.toggleShow = false
            },
            moveCust(item) { // 移动客户到xx分组
                moveGroup(this.nowId, item.id).then(res => {
                    if (res.data.success) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                    }
                })
            }
        },
        components: {
            groupLi
        },
        watch: {
            data(value) {
                this.menu = value
            }
        },
    };
</script>

<style lang="scss" scoped>
  .list{
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* padding-right 20px; */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 7px 7px 0 0;
    //   border-bottom: 2px solid #F3F3F3;
    position: relative;
  }
  .list:hover{
    background: #E9F3FD;
  }
  .icon{
    font-size: 22px;
    margin: 0 10px
  }
  ul {
    list-style: none;
    margin: 10px 0;
    position: absolute;
    width:120px;
    border: 1px solid black;
    border-radius: 5px;
    left: 100px;
    top: 0;
  }

  li {
    padding-left: 20px;
    position: relative;
    color: black;
  }
  li:hover{
    background-color: #E9F3FD;
    color:#2A97F9
  }
  .isfrist{
    background-color:#F5F5F5;
    color:#778088;
    border-color:#F5F5F5;
  }
  .rightBtns{
    display:flex;
    align-items: center;
  }
</style>
